<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>姓名：{{name}}</h2>
      <!-- day 01 part01 -->
      <div>
        <h2 v-text="message"></h2>
        <h2 v-html="html"></h2>
        <img :src="url" alt="" />
        <img v-bind:src="url" />
        <img v-bind:[attr]="url" alt="" />

        <button type="button" v-on:click="click">button1</button>
        <button @click="click2">button2</button>

        <p :style="styles1">one</p>
        <p :style="styles2">two</p>
        <p :style="[o1,o2]"></p>

        <p v-if="money >= 10">吃饭</p>
        <p v-show="money < 10">睡觉</p>
      </div>
      <!-- day 01 part02 -->
      <div>
        <ul>
          <li v-for="item in unique(styles1).slice(0,8)" :key="item">{{item}}</li>
        </ul>
        <ul>
          <li v-for="num in nums" :key="num">{{num}}</li>
        </ul>
        <ul>
          <li v-for="food in foods" :key="food">
            菜名：{{food.name}} ---  价格:{{food.price}}
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
<script src="./js/vue.js"></script>
<script>
  const vm = new Vue({
    el: "#app",
    data: {
      money: 2,
      name: "刘岩岩",
      message: "这是一个v-text文本",
      html: "<b>我是v-html的文字</b>",
      url: "https://t12.baidu.com/it/u=1523767601,938667522&fm=58",
      attr: "src",
      styles1: "width:50px;height:20px;backgroundColor:skyblue",
      styles2: {
        width: "50px",
        height: "50px",
        backgroundColor: "#ccc",
      },
      o1: {
        width: "50px",
        height: "50px",
      },
      o2: {
        backgroundColor: "red",
      },
      nums:[1,213,41,32,12],
      foods: [
        {
          name: '宫保鸡丁',
          price: '$20'
        },
        {
          name: '鱼香肉丝',
          price: '$22'
        },
        {
          name: '韭菜鸡蛋',
          price: '$18'
        },
      ]
    },
    methods: {
      click() {
        console.log("button1被点击了");
      },
      click2() {
        console.log("button2被点击");
      },
      unique(str) {
          let newStr = "";
          for (let i = 0; i < str.length; i++) {
              if (newStr.indexOf(str[i]) === -1) {
                  newStr += str[i];
              }
          }
          return newStr;
      }
    },
  });
</script>
